import * as React from 'react';
import { connect } from "react-redux"
import { useTranslation } from 'react-i18next'
import DialogComponents from '../../Dialog/Dialog'
import { setLanguageAction, setThemeAction } from '../../../redux/modules/auth/action'
import { Select, MenuItem, FormControl, InputLabel, Typography } from '@mui/material'


const SettingsDialog = (props) => {
  const [language, setLanguage] = React.useState(props.auth.language)
  const [theme, setTheme] = React.useState(props.auth.theme ? props.auth.theme : 'standard')
  const [isSubmitting, setIsSubmitting] = React.useState(false)
  const { t } = useTranslation()
  // 关闭弹窗
  const handleCloseDialog = () => {
    props.handleCloseSettingDialog()
  }
  // 设置语言
  const handleLanguageChange = (event) => {
    setLanguage(event.target.value)
  }
  // 设置主题
  const handleThemeChange = (event) => {
    setTheme(event.target.value)
  }

  // 正在确认
  const setSubmittingToTrue = () => {
    setIsSubmitting(true)
  }
  // 完成确认
  const setSubmittingToFalse = () => {
    setIsSubmitting(false)
  }
  // 点击确认按钮
  const handleConfirm = () => {
    setSubmittingToTrue()
    props.setLanguageAction(language)
    props.setThemeAction(theme)
    handleCloseDialog()
    setSubmittingToFalse()
  }

  return (
    <>
      <DialogComponents dialogTitle="用户设置" open={props.open} handleClose={handleCloseDialog} isSubmitting={isSubmitting} handleConfirm={handleConfirm}>
        <div>
          <Typography>{t('system.choiceLanguage')}:</Typography>
          <FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
            <InputLabel id="languageInputLable">{t('common.language')}</InputLabel>
            <Select
              labelId="languageInputLable"
              value={language}
              onChange={handleLanguageChange}
            >
              <MenuItem value={'zhCN'}>简体中文</MenuItem>
              <MenuItem value={'enUS'}>EN</MenuItem>
            </Select>
          </FormControl>
          <Typography>{t('system.choiceTheme')}:</Typography>
          <FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
            <InputLabel id="themeInputLable">{t('system.theme')}</InputLabel>
            <Select
              labelId="themeInputLable"
              value={theme}
              onChange={handleThemeChange}
            >
              <MenuItem value={'standard'}>{t('system.standardMode')}</MenuItem>
              <MenuItem value={'dark'}>{t('system.darkMode')}</MenuItem>
            </Select>
          </FormControl>
        </div>
      </DialogComponents>
    </>
  )
}
const mapStateToProps = state => state
const mapDispatchToProps = {
  setLanguageAction,
  setThemeAction
}
export default connect(mapStateToProps, mapDispatchToProps)(SettingsDialog)